<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <!-- 左边菜单栏 -->
    <div class="navigation">

        <ul>
            <li class="list active">
                <b></b>
                <b></b>
                <a href="index.html">
                    <span class="icon">
                        <ion-icon name="home-outline"></ion-icon>
                    </span>
                    <span class="title">科室导航</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="departscheduling.html">
                    <span class="icon">
                        <ion-icon name="calendar-outline"></ion-icon>
                    </span>
                    <span class="title" id="paiban">排班</span>
                </a>
            </li>

            <li class="list">
                <b></b>
                <b></b>
                <a href="reservationinfo.html">
                    <span class="icon">
                        <ion-icon name="person-circle-outline"></ion-icon>
                    </span>
                    <span class="title">我的预约信息</span>
                </a>
            </li>
            <li class="list">
                <b></b>
                <b></b>
                <a href="RankingList.html">
                    <span class="icon">
                        <ion-icon name="thumbs-up-outline"></ion-icon>
                    </span>
                    <span class="title">点赞排行榜</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="toggle">
        <ion-icon name="menu-outline" class="open"></ion-icon>
        <ion-icon name="close-outline" class="close"></ion-icon>
    </div>



    <div id="app">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-md  navbar-dark" style="background-color: rgb(255, 55, 55);" id="daohang">
            <a class="navbar-brand" href="#">林科大校医 🏥 </a>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <!-- 在这个导航栏中定义每一个选项 -->
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <!-- 一个选项就是一个li标签 -->
                    <li class="nav-item active ml-3">
                        <a class="nav-link" href="#">首页<span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item ml-3">
                        <a class="nav-link" href="#"></a>
                    </li>
                    <!-- 有下拉选项的li标签 -->
                    
                </ul>
                <p class="userName">用户名:{{userName}}</p>
            </div>
        </nav>
        
        <div class="imgContainer">
            <img id="imgid" src="gg1.jpg" />
        </div>



        <!-- 右边科室医生 -->
        <div class="container">
            <div class="row" id="main">
                <!-- 左边 -->
                <div class="col-lg-3 col-md-2 col-sm-12">
                    <!-- 列表 -->
                    <h1 class="lead">科室导航</h1>
                    <!-- 快捷  b4-list-default -->
                    <ul class="list-group">
                        <!-- b4-list-a 快捷键
                    先通过li标签循环department这个数组，得到一个部门对象
                    循环一级部门的sub属性，这个属性是一个数组，得到下级部门-->
                        <li class="list-group-item" v-for="(depart, index) in department" :key="index" @click="changeText()">
                            {{depart.title}}
                            <div class="list-group">
                                <a v-for="(subdepart, index) in depart.sub" :key="index"
                                    @click="getCurrDepartment(subdepart)"
                                    class="list-group-item list-group-item-action ">
                                    {{subdepart.title}}
                                </a>
                                <!--当我们点击的时候触发 getCurrDepartment方法，传递当前科室id和名字-->
                            </div>
                        </li>

                    </ul>
                </div>
                <!-- 右边 -->
                <div class="col-md-8 col-12">
                    <h1 class="lead">名医导航</h1>
                    <!-- 卡片：图片展示一个内容   b4-card-grid   -->
                    <div class="row">
                        <!-- 占的列 遍历所有的医生，得到医生的对象-->
                        <div class="col-md-4 col-sm-6 col-6 mb-3" v-for="(doc, index) in doctor" :key="index">
                            <div class="card">
                                <!-- 添加一个图片 -->
                                <input type="image" src="ji.gif" width="100%" height="130px">
                                
                                <div class="card-body text-center">
                                    <h3 class="card-title">{{doc.name}}</h3>
                                    <p class="card-text">{{doc.level}}</p>
                                    <p class="card-text">{{doc.department.title}}</p>
                                    <div class="dianzan" @click="dianzhan(doc.id,1)" v-show="isThumbs[index]">
                                        <div class="like"></div>
                                        <span>{{doc.thumbsCount}}</span>
                                    </div>
                                    <div class="dianzan2" @click="dianzhan(doc.id,1)" v-show="!isThumbs[index]">
                                        <div class="like2"></div>
                                        <span>{{doc.thumbsCount}}</span>
                                    </div>
                                </div>
                                <!-- 点击挂号的时候，传递一个医生对象 -->
                                <a @click="getDoctor(doc)" type="button" class="btn btn-outline-danger">挂号</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="container1">

                    <p class="lead text-center">中南林业科技大学-不食油饼</p>

                </div>
            </div>
        </div>

    </div>

</body>

</html>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

<script>
    //添加动作
    let menuToggle = document.querySelector('.toggle');
    let navigation = document.querySelector('.navigation')
    menuToggle.onclick = function () {
        menuToggle.classList.toggle('active');
        navigation.classList.toggle('active');
    }
    //点击
    let list = document.querySelectorAll('.list');
    for (let i = 0; i < list.length; i++) {
        list[i].onclick = function () {
            let j = 0;
            while (j < list.length) {
                list[j++].className = 'list'
            }
            list[i].className = 'list active';
        }
    }
</script>


<script>
    var url = `http://localhost:8080`;
    const vm = new Vue({
        el: "#app", //当前vue对象渲染的页面  //vm.mount("#app")
        data() {
            return {
                title: "林科大东方医院",
                curDepart: "请选择科室",
                // 部门信息,data
                department: null,
                //医生信息
                doctor: [],
                isThumbs:[],
                patientId:1,
                userName:"",
            }
        },
        mounted() { //生命周期，当data中有数据了，但是我们还没有放到页面上去
            this.setSeesion(this.curDepart);
            this.getallDepartment();  //调用了查询所有的函数
            this.userName=JSON.parse(sessionStorage.getItem("user")).name;
        },
        methods: {
            changeText(){
                document.getElementById("paiban").innerText=this.curDepart.title+"排班";
                console.log(domNode);
            },
            getIsThumbs(patientId){
                const params={
                    patientId:patientId
                }
                axios.get(`${url}/doctor/isThumbed/${this.curDepart.id}`,{
                    params:params
                }).then((res)=>{
                    this.isThumbs=res.data;
                })

            }
            ,
            getDoctor(doctor) {
                //将医生信息传递到doctor页面
                sessionStorage.setItem("doctor", JSON.stringify(doctor));
                //跳转到doctor页面
                window.location.href = "doctor.html";
            },
            /**查找所有的部门信息
             */
            getallDepartment() {
                //查询一般使用get：查询  post 添加  put 修改   delete 删除
                axios.get('http://localhost:8080/department/getAll')
                    .then(function (response) {
                        //response表示返回的数据对象，这个里面有很多的内容
                        vm.department = response.data;
                    })
                    .catch(function (error) {
                        //出现错误会返回一个error
                        console.log(error);
                    })
            },
            //设置科室名字到sessionStorage中
            setSeesion(depart) {
                sessionStorage.setItem("curDepart", depart);
            },
            //拿到当前科室的id和当前科室的名字
            getCurrDepartment(curdepart) {
                //情况上一次查询的部门医生
                this.doctor = [];
                this.curDepart = curdepart;
                console.log(curdepart);
                //修改了当前科室的名字，所以重新设置
                this.setSeesion(JSON.stringify(curdepart));
                this.getIsThumbs(1);
                //拿到科室的id，通过科室的id找到当前的所有医生
                axios.get(`http://localhost:8080/doctor/getDoctor/${curdepart.id}`)
                    .then((response) => {
                        this.doctor = response.data;
                    })
                    .catch(function (error) {
                    })
            },
            dianzhan(doctorId, patientId) {

                let data = new FormData();
                data.append("doctorId", doctorId)
                data.append("patientId", patientId);
                console.log(doctorId, patientId);
                axios
                    .post(`${url}/doctor/thumbs`, data, {
                        
                        headers: { 'Content-Type': 'multipart/form-data' }
                    })
                    .then((response) => {
                        console.log(response.data);
                        let doctorsId = this.curDepart.id
                        this.getIsThumbs(this.patientId)
                        axios
                            .get(`${url}/doctor/getDoctor/${doctorsId}`)
                            .then((response) => {
                                console.log(response);
                                this.doctor = response.data;
                            })
                            .catch(function (error) { });
                    });
            }
        },

    })

</script>


<script>
    function imgscroll() {
        var myimg = document.getElementById("imgid");
        if (myimg.src.match("gg1.jpg")) {
            myimg.src = "gg2.jpg";
        } else if (myimg.src.match("gg2.jpg")) {
            myimg.src = "gg3.jpg";
        } else {
            myimg.src = "gg1.jpg";
        }
    }
    window.onload = function () {
        t = setInterval(imgscroll, 2000);
    }
</script>